﻿<template>
    <div class="hidden h100 flex-column">
        <component is="style" />

        <div class="flex-column-fill">
            <vxe-table :data="tableData" ref="vxeTable" stripe border style="width:100%;" height="100%" size="small" auto-resize :row-config="{isCurrent: true, isHover: true}" :column-config="{minWidth:'60px'}">
                <vxe-column type="seq" width="70" align="center">
                    <template #header>
                        <div class="flex-row" style="justify-content: space-around;">
                            @*<el-button type="primary" size="mini" icon="el-icon-refresh-right" circle v-on:click="loadList">
                            </el-button>*@
                            <el-dropdown trigger="click" v-on:command="selectUserCommand">
                                <span class="el-dropdown-link">选择<i class="el-icon-arrow-down el-icon--right"></i></span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item :command="1">全选</el-dropdown-item>
                                    <el-dropdown-item :command="2">反选</el-dropdown-item>
                                    <el-dropdown-item :command="3">全不选</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>

                    </template>
                    <template slot-scope="d">
                        <el-checkbox v-model="d.row.isCK"></el-checkbox>
                    </template>
                </vxe-column>
                <vxe-column field="openId" min-width="250" align="center">
                    <template #header="d">
                        <div class="flex-row" style="justify-content: space-around;">

                            <span class="margin-left-6 margin-right-6">openId|session_key</span>
                            <!-- <el-input style="width:150px; margin-right:4px;" placeholder="检索" size="small"
                        v-model.trim="search"></el-input> -->
                        </div>
                    </template>
                    <template #default="d">
                        <div>{{d.row.openId}}</div>
                        <div>{{d.row.session_key}}</div>
                    </template>
                </vxe-column>
                <vxe-column title="用户名|openkey" width="300" align="center">
                    <template #default="d">
                        <div>{{d.row.uiName}}</div>
                        <div class="color-999">{{d.row.openkey}}</div>
                        <div class="color-green">{{d.row.bucketName}}</div>
                    </template>
                </vxe-column>
                @*<vxe-column title="用户权限" min-width="250" align="center">
                    <template #default="d">
                        <span v-for="it in d.row.state.split(',')" :key="it" style="margin: 0 5px;">
                            <el-tag>{{it}}</el-tag>
                        </span>
                    </template>
                </vxe-column>*@
                <vxe-column field="uiTime" title="时间" min-width="200" align="center">
                    <template #header="d">
                        <div class="flex-row" style="justify-content:center;">
                            时间
                            <el-dropdown class="margin-left-10" type="primary" size="small" v-on:click="loadList" v-on:command="command">
                                <span class="el-dropdown-link">排序<i class="el-icon-arrow-down el-icon--right"></i></span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item :command="0">默认</el-dropdown-item>
                                    <el-dropdown-item :command="1">wx</el-dropdown-item>
                                    <el-dropdown-item :command="2">pc</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </template>
                    <template #default="d">
                        <div>
                            <div><el-tag type="info" size="small">创建{{d.row.uiTime}}</el-tag></div>
                            <div v-if="d.row.pcTime" class="margin-top-4"><el-tag size="small">PC：{{d.row.pcTime}}</el-tag></div>
                            <div v-if="d.row.wxTime" class="margin-top-4"><el-tag type="success" size="small">wx：{{d.row.wxTime}}</el-tag></div>
                        </div>
                    </template>
                </vxe-column>
                <vxe-column field="uiMark" title="备注" min-width="280" align="center">
                </vxe-column>
                <vxe-column title="操作" width="200" align="center" fixed="right">
                    <template #header="d">
                        <el-dropdown type="primary" size="small" v-on:command="operateCommand">
                            <span class="el-dropdown-link">操作<i class="el-icon-arrow-down el-icon--right"></i></span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :command="0">小程序更新通知</el-dropdown-item>
                                <el-dropdown-item :command="1">日程提醒</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                    <template #default="scope">
                        <el-form :inline="true" label-width="60px" size="mini">
                            <el-form-item v-if="fn.edit">
                                <el-button type="warning" icon="el-icon-edit" v-on:click="add(scope)" size="mini" plain>查看</el-button>
                            </el-form-item>
                            <el-form-item v-if="fn.leave">
                                <el-button type="primary" icon="el-icon-setting" plain size="mini" v-on:click="showfun(scope.row.openId)">权限</el-button>
                            </el-form-item>
                            <el-form-item v-if="fn.del">
                                <el-button type="danger" icon="el-icon-delete" v-on:click="deleteRow(scope)" size="mini"
                                           plain>删除</el-button>
                            </el-form-item>
                            <el-form-item v-if="fn.wx">
                                <el-button type="primary" icon="fa fa-wechat" v-on:click="openEdit(1,scope.row)" size="mini"
                                           plain>日程提醒</el-button>
                            </el-form-item>
                        </el-form>
                        <div class="color-red">
                            {{list.find(function (item) { return item.openId== scope.row.openId })?list.find(function (item) { return item.openId== scope.row.openId }).errmsg:''}}
                        </div>
                    </template>
                </vxe-column>
            </vxe-table>

        </div>
        <div class="flex-row padding-tb-8">
            <div class="flex-row-fill margin-left-10">
            </div>
            <el-pagination background v-on:size-change="pagerSizeChange" v-on:current-change="pagerIndexChange"
                           :current-page="query.pageIndex" :page-sizes="[10,20,30,50,100]" :page-size="query.pageSize"
                           layout="prev, pager, next, total, jumper, sizes" :total="query.rowCount" :small="true"></el-pagination>
        </div>
        <el-drawer custom-class="el-drawer-fix" size="600px" v-if="dialog" :visible.sync="dialog"
                   :destroy-on-close="true" :close-on-press-escape="false" :wrapper-closable="false">
            <div slot="title">
                {{form.optType==0?'新增':'编辑'}}用户
            </div>
            <div v-if="dialog" class="flex-column hidden" style="position:absolute;top:0;bottom:0;left:0;right:0;">
                <div class="flex-column-fill margin-8 hidden-x" style="padding-right:20px;">
                    <el-form size="medium" :model="form" ref="form" :rules="rules" label-position="top">

                        <el-form-item label="openId" required>
                            <el-input v-model="form.openId" clearable disabled>
                            </el-input>
                        </el-form-item>
                        <!-- <el-form-item label="session_key" required>
                        <el-input v-model="form.session_key" clearable disabled></el-input>
                    </el-form-item> -->
                        <el-form-item label="密码" required>
                            <el-input v-model="form.pwd" clearable disabled></el-input>
                        </el-form-item>
                        <el-form-item label="用户名" prop="uiName" required>
                            <el-input v-model="form.uiName" clearable placeholder="请输入用户名" :disabled="!fn.edit"></el-input>
                        </el-form-item>
                        <el-form-item label="账号" prop="account" required>
                            <el-input v-model="form.account" clearable placeholder="请输入账号" :disabled="!fn.edit"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="uiMark">
                            <el-input v-model="form.uiMark" type="textarea" :autosize="{ minRows: 4, maxRows: 6}"
                                      clearable placeholder="请输入备注" :disabled="!fn.edit"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="padding-10 border-top-solid border-greyLight">
                    <el-button-group>
                        <el-button type="info" plain v-on:click="dialog=false" size="small">
                            取消
                        </el-button>
                        <el-button type="primary" v-on:click="submit" size="small">确 定</el-button>
                    </el-button-group>
                </div>
            </div>
        </el-drawer>
        <el-drawer custom-class="el-drawer-fix" size="600px" v-if="setting.show" :visible.sync="setting.show"
                   :destroy-on-close="true" :close-on-press-escape="false" :wrapper-closable="false">
            <div slot="title">
                权限设置
            </div>
            <div class="flex-column hidden">
                <el-tree ref="treeFunc" class="flex-column-fill" :data="setting.menuList" show-checkbox :props="defaultProps" default-expand-all :default-checked-keys="setting.checkKeys" node-key="id" :check-strictly="true" :expand-on-click-node="false" :check-on-click-node="true" v-on:check-change="funcChange">
                    <template #default="d">
                        <div class="flex-row-fill flex-row padding-right-10 padding-left-6">
                            <span class="el-tree-node__label">{{d.data.name}}</span>
                            <div class="flex-row-fill"></div>
                            <el-button type="text" size="mini" class="color-gray" v-on:click.stop="treeCheck(true,d.data)" v-if="d.data.children.length>0">全选</el-button>
                            <el-button type="text" size="mini" class="color-gray" v-on:click.stop="treeCheck(false,d.data)" v-if="d.data.children.length>0">全不选</el-button>
                        </div>
                    </template>
                </el-tree>
                <div class="padding-10 border-top-solid border-greyLight">
                    <el-button-group>
                        <el-button type="info" plain v-on:click="setting.show=false" icon="fa fa-rotate-left" size="small">
                            关闭
                        </el-button>
                        <el-button type="primary" icon="fa fa-check" v-on:click="onSaveFunc" size="small">保 存</el-button>
                    </el-button-group>
                </div>
            </div>
        </el-drawer>        
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'fingerPrint',
            props: {

            },
            data: function () {
                var _this = this, optor = hxt.store.optor;
                return {
                    optor: optor,
                    fn: {
                        edit: optor.canDo(30601), del: optor.canDo(30602), leave: optor.canDo(999), wx: optor.canDo(30603)
                    },
                    query: {
                        pageIndex: 1,
                        pageSize: 10,
                        sort: 1,
                        rowCount: 0,
                    },
                    tableData: [],
                    dialog: false,
                    form: null,
                    oldform: "",
                    states: { load: false, list: [] },
                    rules: {
                        uiName: [{
                            required: true,
                            message: '请输入用户名',
                            trigger: 'change'
                        }],
                        account: [{
                            required: true,
                            message: '请输入账号',
                            trigger: 'change'
                        }]
                    },
                    list: [],
                    wxMsg: {show:false},
                    setting: { show: false, menuList: [], checkKeys: [], openId: '' },
                    defaultProps: {
                        children: 'children',
                        label: 'name'
                    }
                }
            },
            computed: {

            },
            watch: {

            },
            activated: function () {
            },
            mounted: function () {
                var _this = this;
                _this.loadList();
            },
            methods: {
                pagerSizeChange: function (val) {
                    var _this = this;
                    _this.query.pageSize = val;
                    if (Math.ceil(_this.query.rowCount * 1.0000 / val) >= _this.query.pageIndex) _this.loadList();
                },
                pagerIndexChange: function (val) {
                    var _this = this;
                    _this.query.pageIndex = val;
                    _this.loadList();
                },
                loadList: function () {
                    var _this = this;
                    _this.tableData = [];
                    hxt.post({
                        url: hxt.config.link + 'pc/userList',
                        data: _this.query,
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('加载列表失败：' + res.errmsg);
                            $.each(res.data.list, function (ix, item) {
                                item.isCK = false;
                                _this.tableData.push(item);
                            });
                            _this.query.pageIndex = res.data.pageIndex;
                            _this.query.pageSize = res.data.pageSize;
                            _this.query.rowCount = res.data.rowCount;
                        }
                    });
                },
                operateCommand: function (e) {
                    var _this = this, list = $.grep(_this.tableData, function (item) {
                        return !!item.isCK;
                    });
                    if (e == 0) {
                        hxt.post({
                            url: hxt.config.link + 'wx/wxUpdateSend',
                            data: {
                                openIdList: encodeURIComponent(JSON.stringify(list))
                            },
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('发送失败：' + res.errmsg);
                                _this.list = res.data;
                            }
                        });
                        return;
                    };
                    if (e == 1) {
                        hxt.post({
                            url: hxt.config.link + 'wx/wxScheduleSend',
                            data: {
                                openIdList: encodeURIComponent(JSON.stringify(list))
                            },
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('发送失败：' + res.errmsg);
                                _this.list = res.data;
                            }
                        });
                        return;
                    };
                },
                openEdit: function (flag, g) {//flag 1 日程提醒
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'wx/wxScheduleSend',
                        data: {
                            openIdList: encodeURIComponent(JSON.stringify([_this.tableData.map(function (item) {
                                return { openId: item.openId, uiName: item.uiName, schTitle: '日程标题', schDate: hxt.dateFormat('yyyy-MM-dd'), schMark:'' }
                            })[0]]))
                        },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('发送失败：' + res.errmsg);
                            _this.list = res.data;
                        }
                    });
                },
                command: function (e) {
                    var _this = this;
                    _this.query.sort = e;
                    _this.loadList();
                },
                selectUserCommand: function (command) {
                    var _this = this;
                    if (command == 1) {
                        $.each(_this.tableData, function (ix, item) {
                            item.isCK = true;
                        });
                    } else if (command == 2) {
                        $.each(_this.tableData, function (ix, item) {
                            item.isCK = !item.isCK;
                        });
                    } else if (command == 3) {
                        $.each(_this.tableData, function (ix, item) {
                            item.isCK = false;
                        });
                    };
                },
                deleteRow: function (d) {
                    var _this = this, openId = _this.optor.openId;
                    hxt.confirm('注意：删除后不能找回, 是否继续?', function () {
                        hxt.post({
                            url: hxt.config.link + 'pc/getUserInfo',
                            data: {
                                optType: 2,
                                openId: d.row.openId,
                                oiId: openId
                            },
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('删除失败：' + res.errmsg);
                                hxt.success('删除成功');
                                _this.tableData.splice(d.rowIndex, 1);
                            }
                        });
                    });
                },
                add: function (d) {
                    var _this = this;
                    _this.form = JSON.parse(JSON.stringify(d.row));
                    _this.form.optType = 1;
                    _this.form.state = d.row.state.split(',');
                    _this.oldform = JSON.stringify(_this.form);
                    _this.dialog = true;
                },
                getState: function () {
                    var _this = this;
                    if (!!_this.states.load) return;
                    hxt.post({
                        url: hxt.config.link + 'pc/getState',
                        data: {

                        },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('获取权限失败：' + res.errmsg);
                            _this.states.load = true;
                            _this.states.list = res.data;
                        }
                    });
                },
                submit: function () {
                    var _this = this;
                    _this.form.oiId = _this.optor.openId;
                    var form = JSON.parse(JSON.stringify(_this.form));
                    if (!_this.oldform == JSON.stringify(_this.form)) return hxt.error("提交失败：信息未更改");
                    hxt.validateElForm(_this, "form", function () {
                        var state = "";
                        form.state.forEach(function (item, index) {
                            state += (index == 0 ? "" : ",") + item;
                        });
                        form.state = state;
                        hxt.post({
                            url: hxt.config.link + 'pc/getUserInfo',
                            data: form,
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                hxt.success('提交成功');
                                _this.loadList();
                                _this.dialog = false;
                            }
                        });
                    });
                },
                showfun: function (openId) {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/GetFfun',
                        data: { openId: openId },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('查询失败：' + res.errmsg);
                            var menuList = [];
                            var createMenu = function (pId, list) {
                                var arr = $.grep(res.data.list.sort(function (a, b) {
                                    return a.Id - b.Id;
                                }), function (item, ix) {
                                    return item.flpId == pId;
                                });
                                $.each(arr, function (ix, item) {
                                    var m = {
                                        id: item.Id, pId: item.flpId, level: item.level, name: item.name, state: item.state, path: '/' + item.flId, children: []
                                    };
                                    createMenu(m.id, m.children);
                                    list.push(m);
                                });
                            };
                            createMenu(1, menuList);
                            //console.log(menuList, 'menuList');
                            _this.setting.menuList = menuList;
                            _this.setting.openId = openId;
                            _this.setting.checkKeys = res.data.data.uiAccessList.map(function (x) { return x.flId });
                            _this.setting.show = true;
                        }
                    });

                },

                //权限全选
                treeCheck: function (val, data) {
                    var _this = this; tree = _this.$refs['treeFunc'];//setChecked
                    var ck = function (item) {
                        tree.setChecked(item.id, val, true);
                        item.children.forEach(function (x) {
                            ck(x);
                        });
                    };
                    ck(data);
                },
                //权限选择改变
                funcChange: function (val, ck, childck) {
                    var _this = this; tree = _this.$refs['treeFunc'];//setChecked
                    if (ck) {
                        tree.setChecked(val.pId, true);
                    }
                    else {
                        val.children.forEach(function (x) {
                            tree.setChecked(x.id, false, true);
                        });
                    }
                },
                //保存权限
                onSaveFunc: function () {
                    var _this = this, tree = _this.$refs['treeFunc'];
                    var idList = tree.getCheckedKeys().join(',')
                    hxt.confirm('确定保存？', function () {
                        hxt.post({
                            url: hxt.config.link + 'pc/funSave',
                            data: { openId: _this.setting.openId, idList: idList },
                            ok: function (res) {
                                if (res.code != 0) return hxt.alert('保存失败：' + res.errmsg);
                                hxt.success('保存成功');
                                _this.setting.show = false;
                            }
                        });
                    });
                },

            },
            components: {
            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .el-tab-pane {
        height: 100%;
    }

    .el-tabs__content {
        flex: 1;
    }

    .el-tabs--border-card > .el-tabs__content {
        padding: 0px !important;
    }
</style>